<template>
  <v-col cols="12">
    <v-card tile>
      <v-toolbar flat class="mt-5">
        <v-toolbar-title>用户管理</v-toolbar-title>
        <v-divider class="mx-10" inset vertical></v-divider>
        <v-toolbar-items>
          <v-autocomplete v-model="search.key.field"
                          height="50"
                          dense
                          placeholder="搜索项"
                          cache-items
                          :items="[{text:'昵称',value:'nickName'},{text:'账号',value:'username'},{text:'手机号',value:'phoneNumber'}]"/>
        </v-toolbar-items>
        <v-divider class="mx-10" inset vertical></v-divider>
        <v-text-field
            v-model="search.key.text"
            text
            solo
            flat
            placeholder="搜索昵称、账号、手机号"
            hide-details
            clearable
            @keyup.enter="handleApplyFilter"
            @click:append="handleApplyFilter"
            @click:clear="handleClear"
        />
        <v-btn icon @click="handleApplyFilter">
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon @click="initialize">
          <v-icon>mdi-refresh</v-icon>
        </v-btn>
        <v-btn icon @click="createItem({})">
          <v-icon>mdi-plus</v-icon>
        </v-btn>
      </v-toolbar>
      <v-divider/>
      <v-data-table
          :headers="headers"
          :items="desserts"
          :search="search.key.text"
          :footer-props="{'items-per-page-options':[10,20,30]}"
          :options.sync="pageOptions"
          :server-items-length="totalDesserts"
          :loading="loading"
          class="elevation-1"
      >
        <!-- 操作列 -->
        <template v-slot:item.actions={item}>
          <v-icon class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
        </template>
        <template v-slot:no-data>
          <v-btn color="primary" @click="initialize">无数据</v-btn>
        </template>
      </v-data-table>
    </v-card>
    <!-- 修改/创建/删除 dialog -->
    <SysUserinfoAction/>
  </v-col>
</template>
<script>

import API from '@/router/API'
import {mapMutations, mapState} from 'vuex'

export default {
  components: {
    SysUserinfoAction: () => import('@/components/contents/user/SysUserinfoAction'),
  },
  computed: {
    ...mapState("ItemActionAbout", ['actionItem', 'showDialog'])
  },
  data() {
    return {
      showFilter: false,
      //CRUD 需要的数据
      //搜索需要的数据
      search: {
        key: {
          text: null,
          field: 'resName'
        },
      },
      //分页显示数据选项
      totalDesserts: 0, //列表总数
      desserts: [], // 数据
      loading: true, //加载中

      //分页排序配置
      pageOptions: {
        page: 1,
        itemsPerPage: 20,
        sortBy: ["createAt"],
        sortDesc: [true],
        multiSort: false, //暂时禁用多属性排序
        groupBy: [],
        groupDesc: [],
        mustSort: false

      },
      //表头
      headers: [
        {
          text: 'ID',
          align: 'start',
          sortable: false,
          value: 'id',
        },
        {text: '账号', value: 'username', align: 'center'},
        {text: '昵称', value: 'nickName', align: 'center'},
        {text: '邮件', value: 'email'},
        {text: '手机号', value: 'phoneNumber'},
        {text: '写别', value: 'sex'},
        {text: '状态', value: 'status'},
        {text: '头像', value: 'avatarPath'},
        {text: '角色', value: 'roles'},
        {text: '创建时间', value: 'createAt', align: 'center'},
        {text: '操作', value: 'actions', align: 'center', sortable: false},

      ],
    }
  },
  watch: {
    pageOptions: {
      immediate: false,
      deep: true,  //深度监视，只要 options的属性变化了，就会被监视到
      handler: function (val, oldVal) {
        this.initialize()
      },
    },
  },
  methods: {
    ...mapMutations('ItemActionAbout', ['editItem', 'createItem', 'showItem']),
    initialize() {
      this.loading = true;
      let requestParam = {
        page: this.pageOptions.page - 1, //后端 page 是从0开始的
        size: this.pageOptions.itemsPerPage,
        sort: this.pageOptions.sortBy[0] + "," + (this.pageOptions.sortDesc[0] ? "DESC" : "ASC"),
      }
      if (this.search.key.field && this.search.key.text) {
        requestParam[this.search.key.field] = this.search.key.text;
      }
      //解决重复点击的BUG,参照官方的实例修改
      if (this.pageOptions.sortBy.length === 0) {
        this.loading = false;
        return;
      }
      this.axios.get(API.SYS_USER_INFO_LIST, {params: requestParam})
          .then((response) => {
            let res = response.data
            this.desserts = res.content
            this.totalDesserts = res.totalElements
            this.loading = false;

          })
    },
    handleApplyFilter() {
      if ((this.search.key.field && this.search.key.text) || this.search.resType || this.search.httpMethod) {
        this.pageOptions.page = 1;
        this.initialize()
      }
    },
    handleResetFilter() {
      this.search.key = {}
    },
    handleClear() {
      this.search.key.text = null
    },
  },
}
</script>